<template>

            <el-menu
                    active-text-color="#ffd04b"
                    class="el-menu-vertical"
                    background-color="rgb(48 65 86)"
                    text-color="#fff"
                    :unique-opened="true"
                    :collapse=isCollapse
                    :default-active="navTabStores.current"
                    @open="handleOpen"
                    @close="handleClose"
            >
                <transition name="router_animate">
                <div>
                    <div v-if="!isCollapse" @click="toBilibili" style="color: #fff;font-size:25px;line-height: 45px;text-align:center;display: block;cursor:pointer">
                        客服系统
                    </div>
                    <div v-show="isCollapse"  @click="toBilibili" style="display:flex;justify-content:center;align-items:center;cursor:pointer">
                        <el-image  style="height:30px;width: 30px;margin:10px;border-radius: 5px" src="./avatar.jpg"/>
                    </div>
                </div>
                </transition>
                <el-menu-item index="个人主页"  @click="to({path:'/'}, {name:'个人主页', path:'currHomePage'})">
                    <el-icon><User /></el-icon>
                    <span>个人主页</span>
                </el-menu-item>
                <el-sub-menu :index="item.path" v-for="item in menu" :key="item.id">
                    <template #title>
                        <el-icon><component :is="item.icon"></component></el-icon>
                        <span>{{item.name}}</span>
                    </template>
                        <el-menu-item :index="sub.name" v-for="sub in item.children" @click="to(item, sub, event)">
                            <el-icon><component :is="sub.icon"></component></el-icon>
                            {{sub.name}}
                        </el-menu-item>
                </el-sub-menu>
            </el-menu>
</template>

<script setup>
    import {onBeforeMount, reactive, computed } from 'vue'
    import {useRouter} from 'vue-router'
    import {openState} from '@/stores/openState'
    import {navTab} from '@/stores/navTab'
    let navTabStores = navTab()
    let menuState = openState()
    const router=useRouter()
    const handleOpen = (key, keyPath) => {
    }
    const handleClose = (key, keyPath) => {
    }
    let isCollapse = computed(function () {
        return !menuState.openState
    })
    let menu =reactive([])
    onBeforeMount (function(){
        let menudb = JSON.parse(sessionStorage.getItem("menus")||"[]")
        menu.push(...menudb)
    })
    function toBilibili() {
        window.open("https://space.bilibili.com/488496371")
    }
    function to(parent, menuItem) {
        let item = { name: menuItem.name, parent:parent, path:parent.path + menuItem.path, clicked:true}
        let result = navTabStores.routeTo(item)
    }
</script>
<style scoped>
    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
        height: 100vh;
        overflow-y: scroll;
    }
    .el-menu-vertical {
        height: 100vh;
        overflow-y: scroll;
    }
    .el-menu-vertical::-webkit-scrollbar {
        width: 0px;
    }
    .router_animate-enter-active {
        animation: fadeInUp .3s;
    }
</style>